import  { FC, useState } from 'react';
import { Button } from 'antd';

import Dialog from '../input/dialog';

import '../index.less';
import { ButtonModalProps } from '../interface';

const ButtonModal: FC<ButtonModalProps> = ({ disabled, dialogProps, children }) => {
  const [visible, setVisible] = useState<boolean>(false);

  const handleClick = () => {
    setVisible(true);
  };

  const handleCancel = () => {
    setVisible(false);
  };

  return (
    <>
      <Button disabled={disabled} onClick={handleClick}>
        {children || '新增'}
      </Button>
      <Dialog {...dialogProps} visible={visible} onCancel={handleCancel} />
    </>
  );
};

export default ButtonModal;
